<template lang="pug">
  div#info
    div.item
        h1.title 项目：{{order.tname}}
        div.date {{order.starttime|dateFilter}}
    div.time
        div.start
            div.label 开始时间
            div.time {{order.starttime|timeFilter}}
        div.end
            div.label 结束时间
            div.time {{order.endtime|timeFilter}}
    div.duration
        span {{order.time}}分钟
    div.beautician 美容师： {{order.staffname}}
    div.succ
        img(src='../../assets/check.svg')
        span 预约成功
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      order: {}
    };
  },
  created() {
    const oid = this.$route.query.oid;
    this.$api.v1.order_orderInfo_post({ data: { oid } }).then(resp => {
      this.order = resp.data;
    });
  },
  filters: {
    dateFilter(time) {
      return moment(time,'X').format("YYYY-MM-DD");
    },
    timeFilter(time) {
      return moment(time,'X').format("HH:mm");
    }
  }
};
</script>

<style lang="stylus" scoped>
#info {
    position: relative;

    &>.item {
        background-color: #fff;
        line-height: 0.7rem;
        padding: 0.2rem;
        font-size: 0.3rem;

        .date {
            color: #666;
        }
    }

    &>.time {
        margin-top: 0.5rem;
        background-color: #fff;
        display: flex;
        font-size: 0.3rem;

        &>div {
            width: 50%;
            padding: 0.3rem;
            line-height: 0.7rem;

            &.end {
                text-align: end;
            }
        }
    }

    &>.duration {
        position: relative;
        height: 0;
        text-align: center;
        border-top: solid 0.05rem #ac0e0e;

        span {
            margin: -0.225rem auto;
            display: block;
            height: 0.4rem;
            line-height: 0.4rem;
            width: 1.5rem;
            background-color: #ac0e0e;
            color: #fff;
            border-radius: 0.2rem;
        }
    }

    &>.beautician {
        font-size: 0.3rem;
        background-color: #fff;
        text-align: center;
        padding-top: 0.7rem;
        height: 1.5rem;
    }

    &>.succ {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.3rem;

        img {
            height: 0.7rem;
            vertical-align: middle;
        }

        span {
            margin-left: 0.2rem;
            vertical-align: middle;
        }
    }
}
</style>
